<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none; /*取消a标签下划线*/
            list-style: none; /*取消li黑点*/
            outline: none; /*取消input选中状态*/
        }

        .oBox{
            width: 100%;
            text-align: center;
        }
        .oInput{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top:20px ;
        }
        .oInput .oInText{
            width: 548px;
            height: 44px;
            border-radius: 10px 0 0 10px;
            border:2px solid #c4c7ce;
            border-right: none;
            border-color: #e4e4e5;
            background: #fff;
            color: #222;
        }
        .oInBtn{
            width: 108px;
            height: 44px;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            font-weight: 400;
            border: none;
            background: #e4e4e5;
            color: #222;
        }
        .region a{
            color: plum;
            margin: 10px ;
        }
        .oUl{
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin: auto;
            margin-top: 40px;
        }

        .oUl li h2{
            color:yellow;
            font-size: 30px;
        }
        .oUl li span{
            display: block;
            margin-top: 10px;
            font-size: 20px;
            color: pink;
            font-weight: 800;
        }
    </style>
    <meta charset="UTF-8">
    <title>天知道</title>
</head>
<body>

<div class="oBox">
    <h1>天气查询</h1>
    <div class="oInput">
        <input type="text" @keyup.enter="searcjWeather" v-model="city" class="oInText">
        <input type="button" class="oInBtn" @click="inquire" value="查询">
    </div>
    <div class="region">
        <a href="javascript:;" @click="region('北京')">北京</a>
        <a href="javascript:;" @click="region('上海')">上海</a>
        <a href="javascript:;" @click="region('洛阳')">洛阳</a>
        <a href="javascript:;" @click="region('郑州')">郑州</a>
    </div>
    <ul class="oUl">
        <li v-for="(item,index) in tianQiArr">
            <span>{{item.date}}</span>
            <h2>{{item.type}}</h2>
            <span>{{item.low}}~{{item.high}}</span>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
<script>
    var app= new Vue({
        //建立挂载点
        el: ".oBox",
        data:{
            //创建城市名称
            city:"",
            //存储请求过来天气的值
            tianQiArr:[]
        },
        methods: {

            searcjWeather:function(){
                //保存this，在回调函数里this值会变动，所以需要保存
                var that=this;
                //调用接口
                //地址？查询字符串。？相隔
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                    .then(
                        //两个回调函数第一个是请求成功时触发，第二个请求失败时触发，它们的形参
                        //第一个时服务器相应的内容，第二个是相应错误的信息
                        function(response){
                            // console.log(response);
                            // console.log(response.data.data.yesterday);
                            // console.log(response.data.data.forecast);
                            //将请求的内容赋值给创建好的数组
                            that.tianQiArr=response.data.data.forecast;
                        },function(err){
                            //打印错误
                            console.log(err);
                        })
            },
            region:function(e){
                //这里是城市标签，将值直接传入给当前的city，传入完毕并调用函数
                this.city=e;
                //调用函数
                this.searcjWeather();
            },
            inquire:function(){
                //点击查询按钮，调用函数
                this.searcjWeather();
            }
        }
    })
</script>
</body>
</html>
